<template>
  <!-- <b-map-component></b-map-component> -->
  <div class="drawer">
    <div id="allmap" style="width:100%; height:85vh;"></div>
  </div>
</template>
<script>
/* eslint-disable */
 export default {
  name: '',
  components: {
  },
  data () {
   return {
     ak:'rF9GWU0A8pW3awgAM5CyedhyPo7XSuKR',
     markList:[{
       id:'001',
       point:{lng:86.266037,lat:41.350123},
       title:'格库QDS标-1',
       con:{
         name:'格库QDS标',
         state:'施工中',
         km:'708KM',
         money:'13.42亿'
       },
       router:{name:'查看',url:'/index'},
       show:true
     },{
       id:'002',
       point:{lng:104.966,lat:38.1944}, 
       title:'蒙华四电项目集成',
       con:{
         name:'蒙华四电项目集成',
         state:'施工中',
         km:'708KM',
         money:'234亿'
       },
       show:false
     },{
       id:'003',
       point:{lng:113.3358,lat:35.6122}, 
       title:'郑阜四电项目集成',
       con:{
         name:'郑阜四电项目集成',
         state:'施工中',
         km:'708KM',
         money:'234亿'
       },
       show:false
     },{
       id:'004',
       point:{lng:105.6126,lat:25.6904}, 
       title:'黔桂公路',
       con:{
         name:'黔桂公路',
         state:'施工中',
         km:'708KM',
         money:'234亿'
       },
       show:false
     }]
   }
  },
  created(){
    
  },
  mounted() {
    // GL版命名空间为BMapGL
    var map = new BMapGL.Map("allmap");    // 创建Map实例
    this.markList.forEach((item,index)=>{
      var point = new BMapGL.Point(item.point.lng,item.point.lat);
      var marker = new BMapGL.Marker(point);
      map.addOverlay(marker); // 创建标注
      var opts = {
        position: point, // 指定文本标注所在的地理位置
        offset: new BMapGL.Size(15, -150) //设置文本偏移量
      }
      var htmlTxt = `<div class='item-earth'>
        <div class='name'>名称</div><div class='name_con'>${item.con.name}</div>
      </div>
      <div class='item-earth'>
        <div class='name'>状态</div><div class='name_con'>${item.con.state}</div>
      </div>
      <div class='item-earth'>
        <div class='name'>里程</div><div class='name_con'>${item.con.km}</div>
      </div>
      <div class='item-earth'>
        <div class='name'>投资金额</div><div class='name_con'>${item.con.money}</div>
      </div>
      <div class='item-earth' >
        <a style='position: absolute;right: 5px;bottom: 3px;' href='/'>${index==0?item.router.name:''}</a>
      </div>`
      var label = new BMapGL.Label(htmlTxt, opts);
      label.setStyle({
        color: '#A9DDEE',
        fontSize: '12px',
        lineHeight: '20px',
        fontFamily: '微软雅黑',
        backgroundColor: 'rgba(35, 43, 116,0.6)',
        border: '1px solid #A9DDEE',
        borderRadius: '5px',
        padding: '10px',
        display: item.show?'flex':'none',
        flexDirection: 'column',
      });
      map.addOverlay(label);

      var optsTitle = {
        position: point, // 指定文本标注所在的地理位置
        offset: new BMapGL.Size(15, -25) //设置文本偏移量
      }
      var htmlTitle = item.title
      var labelTitle = new BMapGL.Label(htmlTitle, optsTitle);
      labelTitle.setStyle({
        color: '#fff',
        fontSize: '12px',
        lineHeight: '20px',
        fontFamily: '微软雅黑',
        backgroundColor: 'rgba(35, 43, 116,1)',
        border: '1px solid #A9DDEE',
        borderRadius: '2px',
        padding: '2px 5px',
      });
      map.addOverlay(labelTitle);
      // labelTitle.addEventListener('click',this.handelPoint)
      // label.addEventListener('click',this.handelPoint)
      // document.getElementById('routerBtn').addEventListener('click',this.handelPoint)
      labelTitle.addEventListener('click',function(e){
        label.setStyle({
          display:'none'
        })
        var labelObj = marker.getLabel()
        console.log('getLabel',labelObj)
        if(!labelObj){
          var labelNew = new BMapGL.Label(htmlTxt,{offset: new BMapGL.Size(15, -150)})
          labelNew.setStyle({
            color: '#A9DDEE',
            fontSize: '12px',
            lineHeight: '20px',
            fontFamily: '微软雅黑',
            backgroundColor: 'rgba(35, 43, 116,0.6)',
            border: '1px solid #A9DDEE',
            borderRadius: '5px',
            padding: '10px',
            display: item.show?'none':'flex',
            flexDirection: 'column'
          });
          marker.setLabel(labelNew)
        }else{
          if(labelObj&&labelObj._config.styles.display=='none'){
            marker.getLabel().setStyle({display:'flex'})
          }else{
            marker.getLabel().setStyle({display:'none'})
          }
        }
      })
    })
    

    map.centerAndZoom(new BMapGL.Point(108.5, 30), 5.2);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式
  },
  methods: {
    handelPoint(item){
      console.log('点击了',item)
      // let index = this.markList.findIndex(e=>e.title == item.currentTarget.content)
      // console.log(this.markList[index])
      // this.markList[index].show = !this.markList[index].show
      // label.setStyle({
      //   display:this.markList[index].show?'flex':'none'
      // })
    }
  }
 }
</script>

<style lang='stylus'>
.item-earth {
  display: flex;
  flex-direction: row;
  margin: 2px 0;

  .name {
    width: 50px;
    margin-right: 5px;
    text-align: right;
  }

  .name_con {
    flex: 1;
  }
}
</style>
